import Taro, {Component} from '@tarojs/taro'
import {View, Image, CoverView} from '@tarojs/components'
// import loading from '../../assets/img/loading/loading3.gif'
import './index.scss'
import {getWindowHeight} from '../../utils/style'
import classNames from 'classnames'
import PropTypes from 'prop-types';
import loadingImage from '../../assets/img/loading/loading3-min.gif'

let height

class Loading extends Component {

  constructor(props) {
    super(props)
  }

  static propTypes = {
    spinning: PropTypes.bool,
    desc: PropTypes.string,
  };

  static defaultProps = {
    spinning: false,
    desc: '',
  };

  componentWillMount() {
    height = getWindowHeight() + 'px'
  }


  render() {
    const {spinning, desc, children} = this.props
    // const style = children?{height}:{height:'100%'}
    const style = {height}
    return (
      <View>
        {
          spinning ?
            <CoverView className={classNames('loading__wrapper')} style={style}>
              <CoverView className="loading__wrapper_relative">
                <CoverView className="loading__wrapper-active">
                  <CoverImage src={loadingImage} className='loading__wrapper-img'/>
                  <CoverView>{desc ? desc : '加载Ing~'}</CoverView>
                </CoverView>
              </CoverView>
            </CoverView>
            : null
        }
        <View className="loading__container">
          {children}
        </View>
      </View>
    )
  }
}

export default Loading

